<template>
    <div class="accounting">
        <img
            class="ssfgk-bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/m_ssfgk_bj.png"
            alt="税收法规库"
        />
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">会计法规库</div>
            <div class="right"></div>
        </div>
        <div class="search">
            <div class="select" @click="showPicker2 = true">
                {{ retrieveFields == "name" ? "查标题" : "" }}
                {{ retrieveFields == "info_content_text" ? "查文章" : "" }}
                {{ retrieveFields == "push_number" ? "查文号" : "" }}
                {{ retrieveFields == "push_date" ? "查时间" : "" }}
                <van-icon
                    name="play"
                    size="0.8rem"
                    color="#333333"
                    class="select-icon"
                />
            </div>
            <div class="line"></div>
            <div class="input">
                <van-search
                    v-if="retrieveFields != 'push_date'"
                    v-model="inputText"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                />
                <div v-else class="input-date">
                    <div @click="showDatePopup(1)">{{ date1 }}</div>
                    <span>至</span>
                    <div @click="showDatePopup(2)">{{ date2 }}</div>
                </div>
            </div>
            <van-icon
                name="search"
                size="1.5rem"
                color="#333333"
                class="search-icon"
                @click="onSearch"
            />
        </div>
        <div
            class="tabs"
            :style="{
                top: AppNavShow ? '6.25rem' : '3.5rem',
            }"
            @click="showPicker = true"
        >
            <div class="tab">
                {{ tabsList[tabsIndex].text }}
                <van-icon
                    name="play"
                    size="0.8rem"
                    color="#333333"
                    class="select-icon"
                />
            </div>
            <div class="tab">
                {{ tabsList[tabsIndex].children[tabsTwoIndex].name }}
                <van-icon
                    name="play"
                    size="0.8rem"
                    color="#333333"
                    class="select-icon"
                />
            </div>
        </div>
        <div
            class="data-list"
            :style="{
                height: `calc(100vh - 4.64rem - 2.75rem - 2.5rem - ${
                    AppNavShow ? '3.5rem' : '0rem'
                })`,
            }"
        >
            <nuxt-link
                v-for="(item, index) in dataList"
                :key="index"
                class="data-item"
                :to="`/kjfgk/${item.id}.html`"
            >
                <div class="title">{{ item.name }}</div>
                <div class="tags">
                    <div class="tag">效力注释：{{ item.active_info }}</div>
                    <div class="tag">发文日期：{{ item.push_date }}</div>
                </div>
            </nuxt-link>
            <div class="page">
                <van-pagination
                    v-model="page"
                    :total-items="total"
                    :show-page-size="3"
                    :items-per-page="pageSize"
                    force-ellipses
                    @change="changePage"
                />
            </div>
        </div>

        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                title="标题"
                :columns="tabsList"
                @confirm="pickerConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>

        <van-popup v-model="showPicker2" round position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker2 = false"
                @confirm="onConfirm"
            />
        </van-popup>
        <van-popup v-model="showDate" round position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="dateConfirm"
            />
        </van-popup>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { CICPA, rd } from "@/assets/utils/regulation.js";
import {
    faguislideshow,
    getNormGetList,
    getNormAllclass,
    getNormSearch,
} from "@/assets/api/regulationsApi.js";
import { checkviewNorm, getanalysedata } from "@/assets/api/indexApi.js";
import { recommend_norm } from "@/assets/api/quizData";

import {
    goTop,
    getArr_objKey,
    getText,
    goTopSmooth,
    downLoadAPP,
} from "@/assets/utils/utils.js";

import moment from "moment";

export default {
    async asyncData({ params, query }) {
        let data = {
            tabsIndex: 0,
            tabsTwoIndex: 0,
            tabsList: [
                // {
                //     name: "首页",
                //     id: "86",
                //     pathName: "index",
                //     code: "PE1",
                //     class: [
                //         {
                //             id: 86,
                //         },
                //     ],
                // },
                {
                    id: 1,
                    text: "企业会计",
                    sort: "99",
                    pathName: "qykj",
                    code: "PE3",
                    children: [],
                },
                {
                    id: 2,
                    text: "证监会",
                    sort: "0",
                    pathName: "zjh",
                    code: "PE4",
                    children: [],
                },
                {
                    id: 3,
                    text: "政府会计",
                    sort: "98",
                    pathName: "zfkj",
                    code: "PE5",
                    children: [],
                },
                {
                    id: 4,
                    text: "国际会计",
                    sort: "0",
                    pathName: "gjkj",
                    code: "PE6",
                    children: [],
                },
                {
                    id: 5,
                    text: "企业内控",
                    sort: "96",
                    pathName: "qynk",
                    code: "PE7",
                    children: [],
                },
                {
                    id: 6,
                    text: "全行业会计核算",
                    sort: "97",
                    pathName: "qhykjhs",
                    code: "PE8",
                    children: [],
                },
                {
                    id: 7,
                    text: "其他会计法规",
                    sort: "0",
                    pathName: "qtkjfg",
                    code: "PE9",
                    children: [],
                },
                {
                    id: 8,
                    text: "全科目核算",
                    sort: "96.5",
                    pathName: "qkmhs",
                    code: "PE10",
                    children: [],
                },
            ],
            dataList: [],
            total: 0,
            pageSize: 10,
            page: 1,
            isSearch: false,
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/kjfgk/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        if (query.index) {
            data.tabsIndex = parseInt(query.index);
        }
        if (params.type) {
            data.tabsIndex = getArr_objKey(
                data.tabsList,
                params.type.replace(".html", ""),
                "pathName"
            );
        }
        data.page = parseInt(params.page.replace(".html", ""));

        data.jsonld[
            "@id"
        ] += `${params.type}/${params.indexTwo}/${params.page}`;
        if (params.indexTwo) {
            data.tabsTwoIndex = parseInt(params.indexTwo);
        } else data.tabsTwoIndex = 0;

        const res = await getNormAllclass({});
        if (res.code == 1) {
            let list = data.tabsList;
            for (let i = 1; i < list.length + 1; i++) {
                list[i - 1].children = res.data[i + ""].twoclass;
                for (let item of list[i - 1].children) {
                    item.text = item.name;
                }
            }
            data.tabsList = list;
        }

        let parems = {
            page: data.page,
            pagesize: data.pageSize,
            id: data.tabsList[data.tabsIndex].children[data.tabsTwoIndex].id,
        };
        const res2 = await getNormGetList(parems);
        if (res2.code == 1) {
            data.dataList = res2.data;
            if (res2.data.length > 0) {
                data.total = res2.data[0].datacount;
                data.jsonld.pubDate = data.jsonld.upDate = moment(
                    res2.data[0].createtime * 1000
                ).format("YYYY-MM-DD");
            } else data.total = 0;
        }

        return data;
    },

    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
            ],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            metaTitle: "小竹会计法规库",
            metaKeywords: "小竹会计法规库,会计法规库",
            metaDescription:
                "小竹会计法规库汇集最新的会计法规政策及地方性会计法规政策，时时更新会计法规动态，方便会计从业者能得到更多的会计法规查询",
            getText: getText,

            linkList: [
                {
                    name: "地方注协",
                },
                {
                    name: "相关部门",
                },
            ],
            linkIndex: 0,
            customs: rd,

            showPicker: false,

            // 税种
            policyCate: [],
            // 效力注释
            xiaoliList: [
                {
                    id: "现行有效",
                    name: "现行有效",
                },
                {
                    id: "部分失效/废止",
                    name: "部分失效/废止",
                },
                {
                    id: "全文失效/废止",
                    name: "全文失效/废止",
                },
                {
                    id: "已修订",
                    name: "已修订",
                },
            ],

            swiper: [],

            // 法规数据列表
            // dataList: [],
            // total: 0,
            // pageSize: 30,
            // page: 1,

            // 搜索
            keyword: "", // 标题关键字

            // 搜索2
            searchInput: "",
            number2: "",
            number3: "",
            date: "",
            retrieveFields: "name",
            pickerOptions: {
                shortcuts: [
                    {
                        text: "一个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "三个月内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "一年内",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            value: "",
            regionProps: {
                label: "name",
                value: "id",
                children: "children",
            }, // 地区级联选择器配置
            region: [],

            loading: false,
            isSearch: false,

            searchInput: "",

            downLoadAPP: downLoadAPP,

            showPicker2: false,
            columns: [
                { text: "查标题", name: "name" },
                { text: "查文章", name: "info_content_text" },
                { text: "查文号", name: "push_number" },
                { text: "查时间", name: "push_date" },
            ],
            retrieveFields: "name",
            date1: "",
            date2: "",
            dateIndex: 1,
            showDate: false,
            minDate: new Date(1970, 0, 1),
            maxDate: new Date(),
            currentDate: new Date(),
            inputText: "",
        };
    },
    computed: {
        ...mapState("regulations", {}),
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            AppNavShow: (state) => state.AppNavShow,
        }),
        introduce1: function () {
            return {
                src: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/fgk-describe-bj.png",
                title: "",
                txt: introduceJson[
                    "kjfgk" +
                        (this.$route.params.type ? this.$route.params.type : "")
                ],
            };
        },
    },
    created() {
        this.getMetaInfo();
        this.jsonld.title = this.metaTitle;
        this.jsonld.description = this.metaDescription;
    },
    mounted() {
        for (let item of this.tabsList) {
            if (item.pathName == this.$route.params.type) {
                getanalysedata({
                    m_id: 3,
                    type: 1,
                    code: item.code,
                    describe: item.name,
                });
            }
        }

        if (this.$route.params.page)
            this.page = parseInt(this.$route.params.page.replace(".html", ""));

        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    watch: {},
    methods: {
        pickerConfirm(value) {
            for (let i = 0; i < this.tabsList.length; i++) {
                if (this.tabsList[i].text == value[0]) {
                    let items = this.tabsList[i];
                    this.tabsIndex = i;
                    for (let j = 0; j < items.children.length; j++) {
                        if (items.children[j].text == value[1]) {
                            this.tabsTwoIndex = j;
                            this.showPicker = false;
                            // console.log(this.tabsIndex, this.tabsTwoIndex);
                            this.$router.push({
                                path: `/kjfgk/${items.pathName}/${this.tabsTwoIndex}/1`,
                            });
                            return;
                        }
                    }
                }
            }
        },

        async getList() {
            this.isSearch = false;
            this.loading = true;
            let parems = {
                page: this.page,
                pagesize: this.pageSize,
                id: this.tabsList[this.tabsIndex].children[this.tabsTwoIndex]
                    .id,
            };

            const res = await getNormGetList(parems);
            this.loading = false;

            if (res.code == 1) {
                this.dataList = res.data;
                goTop(50);
                if (res.data.length > 0) this.total = res.data[0].datacount;
                else this.total = 0;

                this.getHotRead();
            }
        },

        getMetaInfo() {
            if (this.$route.params.type == "index") {
                this.metaTitle = "小竹会计法规库";
                this.metaKeywords = "小竹会计法规库,会计法规库";
                this.metaDescription =
                    "小竹会计法规库汇集最新的会计法规政策及地方性会计法规政策，时时更新会计法规动态，方便会计从业者能得到更多的会计法规查询。";
            } else if (this.$route.params.type == "qykj") {
                this.metaTitle = "企业会计法规-会计法规库";
                this.metaKeywords = "企业会计法规";
                this.metaDescription =
                    "小竹财税企业会计法规版块，汇集众多企业会计法规。实时更新企业会计法规条例及相关企业会计法规政策出台，并积极推动企业会计法规宣传与发布。";
            } else if (this.$route.params.type == "zjh") {
                this.metaTitle = "证监会法规-会计法规库";
                this.metaKeywords = "证监会法规";
                this.metaDescription =
                    "小竹财税证监会法规版块，汇集众多证监会法规，实时更新证监会法规条例及相关证监会法规政策出台，并积极推动证监会法规宣传与发布。";
            } else if (this.$route.params.type == "zfkj") {
                this.metaTitle = "政府会计法规-会计法规库";
                this.metaKeywords = "政府会计法规";
                this.metaDescription =
                    "小竹财税政府会计法规版块，汇集众多政府会计法规，实时更新政府会计法规条例及相关证政府会计法规政策出台，并积极推动政府会计法规宣传与发布。";
            } else if (this.$route.params.type == "gjkj") {
                this.metaTitle = "国际会计法规-会计法规库";
                this.metaKeywords = "国际会计法规";
                this.metaDescription =
                    "小竹财税国际会计法规版块，汇集众多国际会计法规，实时更新国际会计法规条例及相关国际会计法规政策出台，并积极推动国际会计法规宣传与发布。";
            } else if (this.$route.params.type == "qynk") {
                this.metaTitle = "企业会计内控法规-会计法规库";
                this.metaKeywords = "企业会计内控法规";
                this.metaDescription =
                    "小竹财税企业会计内控法规版块，汇集众多企业会计内控法规，实时更新企业会计内控法规条例及相关企业会计内控法规政策出台，并积极推动企业会计内控法规宣传与发布。";
            } else if (this.$route.params.type == "qhykjhs") {
                this.metaTitle = "全行业会计核算-会计法规库";
                this.metaKeywords = "全行业会计核算";
                this.metaDescription =
                    "小竹财税全行业会计核算版块，汇集众多全行业会计核算案例，实时更新全行业会计核算资讯及相关全行业会计核算法规政策出台，并积极推动全行业会计核算宣传与发布。";
            } else if (this.$route.params.type == "qtkjfg") {
                this.metaTitle = "会计法规条例-会计法规库";
                this.metaKeywords = "会计法规条例";
                this.metaDescription =
                    "小竹财税会计法规条例版块，汇集众多会计法规条例，实时更新会计法规条例及相关会计法规条例政策出台，并积极推动会计法规条例宣传与发布。";
            } else if (this.$route.params.type == "qkmhs") {
                this.metaTitle = "全科目会计核算-会计法规库";
                this.metaKeywords = "全科目会计核算";
                this.metaDescription =
                    "小竹财税全科目会计核算版块，汇集众多全科目会计核算案例，实时更新全科目会计核算资讯及相关全科目会计核算法规政策出台，并积极推动全科目会计核算法规宣传与发布。";
            }
        },

        // 获取会计法规库类目
        async getNormAllclass() {
            const res = await getNormAllclass({});
            if (res.code == 1) {
                let list = this.tabsList;
                for (let i = 1; i < list.length; i++) {
                    list[i].children = res.data[i + ""].twoclass;
                }
                this.tabsList = list;
                this.getList();
            }
        },

        async getLunbo() {
            const res = await faguislideshow({
                type: 3, // 会计 3   税收 4
            });
            if (res.code == 1) {
                this.swiper = res.data;
            }
        },

        // 获取推荐阅读
        async getreadingList() {
            if (this.readingList.length > 0) return;
            const res2 = await recommend_norm({
                limit: 20,
            });
            if (res2.code == 1) {
                this.readingList = res2.data;
            }
        },

        // 获取热门阅读
        async getHotRead() {
            if (this.hotReadList.length > 0) return;
            if (this.tabsIndex != 0) {
                this.getreadingList();
                return;
            }
            const res2 = await recommend_norm({
                limit: 10,
            });
            if (res2.code == 1) {
                this.hotReadList = res2.data;
                this.getreadingList();
            }
        },

        startSearch() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
                return;
            }
            this.page = 1;
            this.search();
        },

        // 搜索
        async search() {
            this.isSearch = true;
            this.loading = true;
            let parems = {
                page: this.page,
                limit: this.pageSize,
                keyword: this.keyword,
            };

            const res = await getNormSearch(parems);
            this.loading = false;
            if (res.code == 1) {
                this.dataList = res.data;
                goTop(50);
                if (res.data.length > 0) this.total = res.data[0].datacount;
                else this.total = 0;
            }
        },

        // 清空搜索
        clear() {
            // this.title_keyword = ''
            // this.cons_keyword = ''
            // this.zh_keyword = ''
            this.city_code = "";
            this.policy_cate_id = "";
            this.xiaoli_id = "";
            this.date_ = "";
        },

        // 切换分页
        changePage(page) {
            this.page = page;
            if (this.isSearch) this.search();
            else {
                this.$router.push({
                    name: "kjfgk-type-indexTwo-page",
                    // query: {
                    //     indexTwo: this.tabsTwoIndex,
                    // },
                    params: {
                        type: this.tabsList[this.tabsIndex].pathName,
                        page: page + "",
                        indexTwo: this.tabsTwoIndex,
                    },
                });
            }
        },

        // 点击menu
        menuSelect(index) {
            let tabsIndex = Math.trunc(index.slice(0, 1));
            let tabsTwoIndex = parseInt(index.slice(1));
            if (
                this.tabsIndex == tabsIndex &&
                this.tabsTwoIndex == tabsTwoIndex
            )
                return;
            // this.tabsIndex = tabsIndex;
            // this.tabsTwoIndex = tabsTwoIndex;
            // this.page = 1;
            this.$router.push({
                name: "kjfgk-type-indexTwo-page",
                // query: {
                // },
                params: {
                    type: this.tabsList[tabsIndex].pathName,
                    page: "1",
                    indexTwo: tabsTwoIndex,
                },
            });
            // this.getList();
        },

        // 前往详情页
        async goDetails(item) {
            // const res = await checkviewNorm({
            //     id: item.id,
            // });
            // if (res.code == -100) {
            //     return;
            // }
            let routeData = this.$router.resolve({
                name: "AccountingDetails",
                params: {
                    id: item.id + "",
                },
                query: {
                    index: this.tabsIndex,
                    indexTwo: this.tabsTwoIndex,
                },
            });
            window.open(routeData.href, "_blank");
            // console.log(item)
            // this.$router.push({
            //     path: 'TaxRevenue/Details',
            //     query: {
            //         id: item.id,
            //         index: this.tabsIndex
            //     }
            // })
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.allSearch();
                }
            }
        },

        allSearch() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }

            if (
                (this.retrieveFields == "name" ||
                    this.retrieveFields == "info_content_text") &&
                !this.searchInput
            ) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            if (this.retrieveFields == "push_date" && !this.date) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            if (this.retrieveFields == "push_number" && !this.searchInput) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }

            this.$router.push({
                path: "/kjfgksearch",
                query: {
                    k: this.searchInput,
                    date: this.date.length > 0 ? this.date.join(",") : "",
                    t: this.retrieveFields,
                },
            });
        },

        onConfirm(item, index) {
            this.retrieveFields = item.name;
            this.showPicker2 = false;
        },

        showDatePopup(index) {
            this.dateIndex = index;
            this.showDate = true;
        },
        dateConfirm(date) {
            let year = date.getFullYear(); // 获取年份（四位数）
            let month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份（注意月份是从0开始的，所以需要+1），并确保是两位数
            let day = ("0" + date.getDate()).slice(-2);
            let formattedDate = year + "-" + month + "-" + day;
            this["date" + this.dateIndex] = formattedDate;
            this.showDate = false;
        },

        onSearch() {
            let url = "/kjfgksearch?";
            if (
                this.retrieveFields == "name" ||
                this.retrieveFields == "info_content_text" ||
                this.retrieveFields == "push_number"
            ) {
                if (!this.inputText) {
                    Toast("请输入搜索内容");
                    return;
                }
                url += `k=${this.inputText}&date=&t=${this.retrieveFields}`;
            }
            if (this.retrieveFields == "push_date") {
                if (!this.date1 || !this.date2) {
                    Toast("请选择时间范围");
                    return;
                }
                url += `k=&date=${this.date1},${this.date2}&t=${this.retrieveFields}`;
            }
            this.$router.push({
                path: url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.accounting {
    position: relative;
    background-color: #ffffff;
}
.ssfgk-bj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.nav-bar {
    width: 100%;
    position: sticky;

    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}

.search {
    position: relative;
    z-index: 100;
    width: 91%;
    height: 2.5rem;
    margin: 0.7rem auto;
    background-color: #ffffff;
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 1.2rem;
    .select {
        font-size: 0.75rem;
        color: #333333;
        .select-icon {
            transform: rotate(90deg);
            position: relative;
            top: -0.07rem;
        }
    }
    .line {
        width: 1px;
        height: 1.125rem;
        background-color: #bbbbbb;
        margin: 0 0.68rem;
    }
    .input {
        width: 63%;
    }
    .search-icon {
        position: absolute;
        right: 1rem;
    }

    .input-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 0.75rem;
        div {
            width: 100%;
            text-align: center;
            height: 1.2rem;
            line-height: 1.2rem;
        }
        span {
            color: #999999;
        }
    }

    ::v-deep .van-cell {
        padding: 0;
    }
    ::v-deep .van-search {
        padding: 0;
    }
    ::v-deep .van-search__content {
        background: transparent;
    }
    ::v-deep .van-field__left-icon {
        display: none;
    }
}

.tabs {
    position: sticky;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;

    .tab {
        width: 10.31rem;
        height: 2.5rem;
        background: #ffffff;
        border-radius: 2.5rem;
        margin: 0 0.31rem;
        position: relative;
        line-height: 2.5rem;
        padding: 0 1.6rem 0 1.43rem;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出元素框的内容 */
        text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
    }

    .select-icon {
        transform: rotate(90deg);
        position: absolute;
        top: 0.85rem;
        right: 0.81rem;
    }
}

.data-list {
    position: relative;
    z-index: 100;
    width: 92%;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 0.93rem;
    margin: 00.5rem auto 0;
    overflow: auto;
}

.data-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem 0;
    display: block;
    .title {
        font-weight: 500;
        font-size: 0.93rem;
        line-height: 1.5;
        color: #3d3d3d;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }
    .tags {
        margin-top: 0.63rem;
        display: flex;
        align-items: center;

        .tag {
            margin-right: 0.6rem;
            color: #999999;
            font-size: 0.75rem;
        }
    }
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}
</style>